import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Timeline, Badge, Alert, Spin, Pagination } from 'antd';
import moment from 'moment';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile from '@/utils/utils';
import styles from '@/utils/utils.less';

@connect(({ quotation, loading }) => ({
  loading: loading.effects['quotation/fetchHistory'],
  quotationHistoryList: quotation.quotationHistoryList,
}))
@Form.create()
class BasicList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quoId: null,
    };
  }

  componentDidMount() {
    const {
      location: { query },
      dispatch,
    } = this.props;
    const { quoId } = query;
    this.setState({ quoId });
    dispatch({
      type: 'quotation/fetchHistory',
      payload: {
        quoId,
        pageArg: {
          currentPage: 1,
          pageSize: 10,
        },
      },
    });
  }

  // 下载人员信息
  downLoad = id => {
    const params = {
      id,
    };
    downloadFile(params, '/csApi/sendProb/export', 'POST');
  };

  // 分页切换
  handleStandardTableChange = (current, pageSize) => {
    const { dispatch } = this.props;
    const { quoId } = this.state;
    const pageArg = {
      currentPage: current,
      pageSize,
    };
    const params = {
      pageArg,
      quoId,
    };
    dispatch({
      type: 'quotation/fetchHistory',
      payload: params,
    });
  };

  render() {
    const {
      quotationHistoryList,
      loading,
      quotationHistoryList: { current, pageSize, total },
    } = this.props;
    const pagination = {
      style: { textAlign: 'center', paddingTop: 20 },
      defaultCurrent: 1, // 默认当前页
      defaultPageSize: 10, // 默认单页条数
      current, // 当前页
      pageSize, // 单页条数
      total,
      showQuickJumper: true, // 跳转至某页
      showSizeChanger: true, // 是否可以改变 pageSize
      onChange: (page, size) => {
        // 页码改变的回调
        this.handleStandardTableChange(page, size);
      },
      onShowSizeChange: (page, size) => {
        // 单页条数变化的回调
        this.handleStandardTableChange(page, size);
      },
      showTotal: () => {
        const totalPage =
          total < quotationHistoryList.pageSize
            ? 1
            : Math.ceil(total / quotationHistoryList.pageSize);
        return `共 ${total} 条记录 第 ${current} / ${totalPage}页`;
      },
    };
    return (
      <PageHeaderWrapper>
        <Card title={<span style={{ fontWeight: 'bolder' }}>修改记录</span>}>
          {quotationHistoryList && quotationHistoryList.list && quotationHistoryList.list.length ? (
            <Spin tip="Loading..." spinning={loading}>
              <Timeline>
                {quotationHistoryList.list.map(item => (
                  <Timeline.Item key={item.creId}>
                    <p style={{ float: 'left', margin: '0 15px 0 20px' }}>
                      {moment(item.creTime).format('YYYY-MM-DD HH:mm')}
                    </p>
                    <p style={{ float: 'left', margin: '0 20px 20px 15px' }}>{item.creName}</p>
                    <div style={{ float: 'left' }}>
                      {item &&
                        item.recordList &&
                        item.recordList.length &&
                        item.recordList.map(bitem => (
                          <p style={{ display: 'flex' }}>
                            <Badge
                              status="default"
                              text={
                                <span
                                  style={{ fontWeight: 900, marginRight: '10px', width: '400px' }}
                                >
                                  {bitem.title}：
                                </span>
                              }
                            />
                            <span style={{ flex: 1 }}>{bitem.content || '--'}</span>
                          </p>
                        ))}
                    </div>
                    <div style={{ clear: 'both' }} />
                    {item.empInfo ? (
                      <div style={{ marginLeft: 20 }} className={styles.alertBg}>
                        <Alert
                          style={{ marginBottom: 16 }}
                          message={
                            <span>
                              {item.empInfo.updateContent || '暂无内容'}
                              {item.empInfo.errorNum && item.empInfo.errorNum !== 0 ? '，' : null}
                              {item.empInfo.errorNum && item.empInfo.errorNum !== 0 ? (
                                <span style={{ color: 'red' }}>
                                  错误数据{item.empInfo.errorNum}条
                                </span>
                              ) : null}
                              <a
                                style={{ marginLeft: 16 }}
                                onClick={() => this.downLoad(item.custContId)}
                              >
                                下载人员信息
                              </a>
                            </span>
                          }
                          type="info"
                          showIcon
                        />
                      </div>
                    ) : null}
                  </Timeline.Item>
                ))}
              </Timeline>
              <Pagination {...pagination} />
            </Spin>
          ) : (
            '暂无数据'
          )}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => window.history.back()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default BasicList;
